<template lang="">
    <div>
        <el-dialog title="修改问题" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" destroy-on-close>
            <div class="selectType">
                <span>选择题型：</span>
                <el-select v-model="quesType" placeholder="请选择">
                    <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                <component :is='handleComponents(quesType)' :question="question" :isEditQues="isEditQues"
                    v-if="refresh"></component>
                <!-- <SimpleUpdate v-if="quesType == 0" :question="question" :isEditQues="isEditQues"></SimpleUpdate>
                <MultipleUpdate v-if="quesType == 1" :question="question" :isEditQues="isEditQues"></MultipleUpdate>
                <FillUpdate v-if="quesType == 2" :question="question" :isEditQues="isEditQues"></FillUpdate> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="emitServer">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import SimpleUpdate from './updateQues/SimpleUpdate.vue'            //这是从Simple中提出来的东西，时间太紧了我就不把这个注册到Simple里了
    import MultipleUpdate from './updateQues/MultipleUpdate.vue'
    import FillUpdate from './updateQues/FillUpdate.vue'
    import DropUpdate from './updateQues/DropUpdate.vue'
    export default {
        name: 'UpdateQues',
        components: {
            SimpleUpdate,
            MultipleUpdate,
            FillUpdate,
            DropUpdate
        },
        props: ['isEditQues'],
        data() {
            return {
                dialogVisible: false,
                question: {},
                quesType: '',
                refresh: false,
                options: [{
                    label: '单选题',
                    value: 0
                }, {
                    label: '多选题',
                    value: 1
                }, {
                    label: '多行填空',
                    value: 2
                }, {
                    label: '单行填空',
                    value: 3
                }, {
                    label: '下拉框',
                    value: 4
                }],
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.closeDialog()
                        done();
                    })
                    .catch(_ => { });
            },
            closeDialog() {
                this.dialogVisible = false
            },
            handleComponents(type) {
                if (type == 0) {
                    return SimpleUpdate
                } else if (type == 1) {
                    return MultipleUpdate
                } else if (type == 2 || type == 3) {
                    return FillUpdate
                }else if(type == 4){
                    return DropUpdate
                }
            },
            emitServer() {      //点击确定后发送修改请求，根据题型匹配发送的位置，下方所有全局时间总线目标都在/updateQues文件夹下的vue文件中
                //这么来回切换主要是为了方便发请求，父部组件拿到题型并告知子组件何时发请求，子组件拿到修改内容，最后由子组件发请求
                if (this.quesType == 0) {
                    this.$bus.$emit('updateSimple')
                } else if (this.quesType == 1) {
                    this.$bus.$emit('updateMultiple')
                } else if (this.quesType == 2 || this.quesType == 3) {
                    this.$bus.$emit('updateFill')
                }else if(this.quesType == 4){
                    this.$bus.$emit('updateDrop')
                }
            }
        },
        mounted() {
            this.$bus.$on('updateQues', (val) => {
                console.log(val);
                this.question = val
                this.quesType = parseInt(val.queType)

                this.refresh = false
                this.$nextTick(() => {
                    this.refresh = true
                })

                this.dialogVisible = true
            })
        },
        beforeDestroy() {
            this.$bus.$off('updateQues')
        },
    }
</script>
<style scoped>
    .selectType {
        margin: 0px 0px 30px 60px;
    }
</style>